<template>
	<view class="content">
		<view class="step-name">
			{{ steps }}
		</view>
		<view class="hint">
			{{ init }}
		</view>
		<view class="info" v-if="step != 2">
			<image :src="info.bg0 ? info.bg0 : '../../../static/img/setting/real.png'" mode="" v-if="step == 0"></image>
			<image :src="info.bg1 ? info.bg1 : '../../../static/img/setting/real1.png'" mode="" v-if="step == 1"></image>
		</view>
		<view class="upload" v-if="step != 2">
			<view class="upload-1" @click="hanleAd()">
				<image src="../../../static/img/setting/camera.png" mode=""></image>
				拍摄上传
			</view>
			<view class="upload-2" @click="hanleAd('album')">
				<image src="../../../static/img/setting/png.png" mode=""></image>
				图片上传
			</view>
		</view>
		<u--form labelPosition="top" :model="userInfo" labelWidth="auto" v-if="step === 2" ref="uForm" :rules="rules">
			<u-form-item label="手机号码" prop="phone">
				<u--input v-model="userInfo.phone" prefixIcon="../../../static/img/login/phone.svg" placeholder="请输入绑定的手机号码" maxlength="11"></u--input>
			</u-form-item>
			<u-form-item label="短信验证" prop="code">
				<u-input placeholder="请输入您的验证码" prefixIcon="../../../static/img/login/code.svg" v-model="userInfo.code">
					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取" start-text="获取"></u-code>
						<u-button @tap="getCode" :text="tips" size="mini" class="getcode_class"></u-button>
					</template>
				</u-input>
			</u-form-item>
		</u--form>
		<u-toast ref="uToast"></u-toast>
		<view class="btn">
			<view class="step_num">{{ step + 1 }} of 3</view>
			<u-line-progress :percentage="progress" activeColor="#ff0000" height="8" :showText="false" />
			<view class="">
				<button @click="computedWidth">{{ step === 2 ? '确认' : '下一步' }}</button>
			</view>
		</view>
	</view>
</template>

<script>
import { uploadImage } from '@/api/sen/index.js';
import { BASE } from '../../../config';
export default {
	data() {
		return {
			step: 0,
			info: {
				bg0: null,
				bg1: null,
				phone: null,
				code: ''
			},
			userInfo: {
				phone: '',
				code: ''
			},
			percentage: 30,
			tips: '',
			rules: {
				phone: [
					{
						required: true,
						message: '请输入手机号',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}
				],
				code: [
					{
						required: true,
						message: '验证码错误',
						trigger: ['change']
					}
				]
			}
		};
	},
	computed: {
		steps() {
			return this.step == 0 ? '第一步' : this.step == 1 ? '第二步' : '第三步';
		},
		init() {
			return this.step == 0 ? '请上传带有国徽的正面身份证照片' : this.step == 1 ? '请上传带有头像的反面身份证照片' : '请验证您的手机号码';
		},
		progress() {
			return this.step == 0 ? 33.33 : this.step == 1 ? 66.66 : 100;
		}
	},
	methods: {
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				});
				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}, 2000);
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
		codeChange(text) {
			this.tips = text;
		},
		showToast(msg) {
			this.$refs.uToast.show({
				type: 'default ',
				icon: false,
				message: msg
			});
		},
		submit() {
			this.$refs.uForm.validate((valid) => {
				if (valid) {
					console.log('验证通过');
				} else {
					console.log('验证失败');
				}
			});
		},
		computedWidth() {
			if (this.step == 2) {
				this.submit();
				return;
			} else if (this.step == 0 && !this.info.bg0) {
				this.showToast('请上传国徽的正面身份证照片');
				return;
			} else if (this.step == 1 && !this.info.bg1) {
				this.showToast('请上传头像的反面身份证照片');
				return;
			} else if (this.step == 2 && !this.userInfo.phone && !this.userInfo.code) {
				this.showToast('手机号或者验证码不');
				return;
			}
			this.step++;
		},
		
		hanleAd(type = 'camera') {
			uni.chooseImage({
				count: 1,
				sizeType: ['original'],
				sourceType: [type],
				success: (res) => {
					console.log(res, 'seccess');
					uni.uploadFile({
						url: 'http://125.62.52.200:8816/i/upload-img', //仅为示例，非真实的接口地址
						filePath: res.tempFilePaths[0],
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (ress) => {
							if (ress.statusCode === 200) {
								let data = JSON.parse(ress.data);
								if (this.step == 1) {
									this.info.bg1 = data.data;
								} else {
									this.info.bg0 = data.data;
								}
							}
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
// @import url('../../../static/css/login.css');

.step_num {
	text-align: right;
	color: #f04b3f;
	margin-bottom: 10upx;
	margin-right: 10upx;
}
.getcode_class {
	border: none;
	border-left: 1px solid #eeeeee;
	color: red;
}
.u-input {
	background-color: white;
	border-radius: 20rpx;
	border: 0;
	height: 100upx;
}

.btn {
	position: fixed;
	bottom: 100upx;
	width: 90%;
	button {
		background-color: #f04b3f;
		border: 0;
		border-radius: 25upx;
		margin-top: 50upx;
		color: white;
	}
}
.upload {
	display: flex;
	justify-content: space-between;
	height: 130upx;
	.upload-1,
	.upload-2 {
		border-radius: 30upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #948484;
		background-color: #fff;
		font-size: 34upx;
		width: 48%;
		image {
			width: 50upx;
			margin-right: 20upx;
			height: 44upx;
		}
	}
}
.info {
	image {
		width: 100%;
		height: 400upx;
		margin: 45upx 0 20upx 0;
	}
}
.content {
	background-color: #fff8f7;
	padding: 50upx 40upx 0 40upx;
	min-height: 100vh;
}
.step-name {
	color: #f04b3f;
	font-weight: 700;
	font-size: 36upx;
}
.hint {
	color: #0c092a;
	margin-top: 6upx;
	font-size: 32upx;
	margin-bottom: 40upx;
}
</style>
